<template>
  <div>
    <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :hide-on-single-page="hideOnSinglePage"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      :default-page-size="defaultPageSize"
      @size-change="changePageSize"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
// 说明：专门用于表格的分页框架
import { defineProps, withDefaults } from 'vue';

interface Props {
  // 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  currentPage?: string;
  pageSize?: number;
  pageSizes?: number[];
  total?: number;
  layout?: string; // 分页布局，同element 组件
  hideOnSinglePage?: boolean;
  changePageSize: (page: number) => void; // 当每页数据显示数发生变化时触发的一个函数
  changePage: (page: number) => void; // 当页面发生变化时触发的一个函数
  defaultPageSize?: number; //每页默认的条目个数，不设置时默认为10
}
const props = withDefaults(defineProps<Props>(), {
  pageSizes: () => [10, 20, 50, 100, 500],
  layout: 'total, sizes, prev, pager, next, jumper',
  defaultPageSize: 10
});
</script>
<style lang="scss" scoped></style>
